<template>
  <el-menu default-active="2" router>
    <template v-for="(item, index) in menu">
      <el-submenu
        v-if="item.menuChilds && item.menuChilds.length !== 0"
        :index="index + ''"
        :key="item.menuId"
      >
      <!-- index:的值是字符串类型，不能是number. -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.menuName }}</span>
        </template>

        <el-menu-item
          v-for="(el, i) in item.menuChilds"
          :index="index + '-' + i"
          :key="el.menuId"
          :route="el.menuUrl"
          >{{ el.menuName }}</el-menu-item
        >
      </el-submenu>
      <el-menu-item
        v-else
        :index="index + ''"
        :key="item.menuId"
        :route="item.menuUrl"
      >
      <i class="el-icon-setting"></i>
      <span slot="title"> {{ item.menuName }}</span>
     
    </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  props: ["menu"],
  created() {
    console.log(this.menu);
  },
};
</script>

<style>
</style>